<template>
  <div class="trend_page_warp">
    <div v-show="!isShowAddressSelect">
      <contentPage :is-screen="true">
        <pageHeader :show-back="true" ads-type="3" @openSelectAds="openSelectAds" />
        <pageTitleCom :type-list="typeList" @changeType="changeType" />
        <div v-show="defaultTypeIndex===0">
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>每周冰山指数
              </div>
              <div class="trend_w3_box1_right"><span class="trend_w3_box1_price">12465</span> 元/平米
              </div>
            </div>
            <div class="trend_w3_options">
              <!--          <div class="trend_w3_opt1">每周房价变化趋势</div>-->
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt3">
                <div>市场活跃指数</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <span class="trend_w3_opt4_span1">平均价格</span>
                  <span class="trend_w3_opt4_span2">边际价格</span>
                </div>
              </div>
              <div class="trend_w3_opt5" @click="openSelectAddress">
                <div>城市名称</div>
                <div class="trend_w3_opt5_address">{{ selectAddress }}
                  <van-icon name="arrow-down" />
                </div>
              </div>
            </div>
            <div class="trend_w3_Echarts_warp">
              <div id="trendEcharts" class="trend_w3_trendEcharts" />
            </div>
          </div>
          <div class="trend_page_warp4">
            <div class="trend_warp_title">
              <img
                crossorigin="anonymous"
                class="trend_warp_img"
                src="../../assets/icon/increase.png"
                alt=""
              >
              <div class="trend_warp_text">上海行政区冰山指数涨幅排名</div>
            </div>
            <div class="trend_table_warp">
              <table class="trend_table">
                <tr>
                  <th v-for="(itemTh,indexTh) in tableThList" :key="indexTh" class="trend_table_th">{{ itemTh }}</th>
                </tr>
                <tr v-for="(item,index) in arrList1" :key="index" class="trend_table_tr">
                  <td class="trend_table_td1" @click="goXingZhenDetail()">北京</td>
                  <td class="trend_table_td">张山</td>
                  <td class="trend_table_td">李四</td>
                  <td class="trend_table_td">王五</td>
                  <td class="trend_table_td">{{ index + 1 }}</td>
                </tr>
              </table>
            </div>
            <div v-show="!isHavePay">
              <div class="trend_page_isHavePay1">立即解锁</div>
              <div class="trend_page_isHavePay2">即可查看全部行政区涨幅排名</div>
              <div class="trend_page_unlock" @click="handleUnlock">10冰币解锁</div>
            </div>
          </div>
          <div class="trend_page_warp5">
            <div class="trend_warp_title">
              <img
                crossorigin="anonymous"
                class="trend_warp_img"
                src="../../assets/icon/flames.png"
                alt=""
              >
              <div class="trend_warp_text">上海片区市场活跃热度排名TOP30</div>
            </div>
            <ul class="trend_warp5_ul">
              <li v-for="(itemPlace,index) in arrPlaceList2" :key="index" class="trend_warp5_li">
                <span class="trend_warp5_sp1" @click="goPianQuDetail()">{{ itemPlace.name }}</span>
                <span
                  class="trend_warp5_sp2"
                  :style="{width: itemPlace.value + 'px',backgroundColor: itemPlace.color }"
                />
                <span class="trend_warp5_sp3">{{ itemPlace.value }}</span>
              </li>
            </ul>
            <div v-show="!isHavePay">
              <div class="trend_page_isHavePay1">立即解锁</div>
              <div class="trend_page_isHavePay2">即可查看全部片区市场活跃热度排名</div>
              <div class="trend_page_unlock" @click="handleUnlock">10冰币解锁</div>
              <div style="height: 40px" />
            </div>
          </div>
        </div>
        <div v-show="defaultTypeIndex===1">
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>成交指数
              </div>
            </div>
            <div class="trend_w3_options">
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <div class="trend_w3_opt4_c1">挂牌均价(元)</div>
                  <div class="trend_w3_opt4_c2">成交均价(元)</div>
                </div>
              </div>
              <div class="trend_w3_opt3">
                <div class="trend_w3_opt3_title">成交周期(天)</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>

            </div>
            <div class="trend_w3_Echarts_warp2">
              <div id="trendEcharts2" class="trend_w3_trendEcharts2" />
              <div class="echartsData1">报表日期</div>
              <div class="echartsData2">20/01/26</div>
              <div class="echartsData3">20/02/07</div>
            </div>
          </div>
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>成交总价指数
              </div>
            </div>
            <div class="trend_w3_options">
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <div class="trend_w3_opt4_c1">挂牌均价(元)</div>
                  <div class="trend_w3_opt4_c2">成交均价(元)</div>
                </div>
              </div>
              <div class="trend_w3_opt3">
                <div class="trend_w3_opt3_title">成交周期(天)</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>

            </div>
            <div class="trend_w3_Echarts_warp2">
              <div id="trendEcharts3" class="trend_w3_trendEcharts2" />
            </div>
          </div>

        </div>
      </contentPage>
    </div>
    <div v-show="isShowAddressSelect">
      <address-select @closeSelectCity="closeSelectAds" />
    </div>

    <!--  地址选择的的弹窗  -->
    <van-popup v-model="isShowAddressPopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsAddress"
        @confirm="onConfirmAddress"
        @cancel="isShowAddressPopup = false"
      />
    </van-popup>
    <!--  时间的弹窗  -->
    <van-popup v-model="isShowTimePopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsTimes"
        @confirm="onConfirmTime"
        @cancel="isShowTimePopup = false"
      />
    </van-popup>
    <!--    冰币解锁-->
    <van-popup
      v-model="isShowUnlock"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="trend_unlock_warp">
        <div class="unlock_title">解锁全部价格走势</div>
        <div class="unlock_current_need">10冰币</div>
        <div class="unlock_desc">解锁后一年内免费查询</div>
        <div class="unlock_no_money">
          <span class="un_no_l">余额不足，请充值</span>
          <span class="un_no_r">
            <span>当前余额：</span>
            <span class="un_no_r_money">{{ surplusMoney || 0 }}</span>
            <span>&nbsp;冰币</span>
          </span>
        </div>
        <div class="trend_unlock_warp2">
          <ul class="trend_unlock_ul">
            <li
              v-for="itemRecharge in rechargeList"
              :key="itemRecharge.id"
              :class="{rechargeActive: defaultIndex === itemRecharge.id}"
              class="trend_unlock_li"
              @click="selectRechargeMoney(itemRecharge.id,itemRecharge.money1)"
            >
              <div class="recharge_money">充 <span class="recharge_money_count">{{ itemRecharge.money1 }}</span>元</div>
              <div class="recharge_money_desc">{{ itemRecharge.money2 }}冰币</div>
            </li>
          </ul>
          <div class="input_recharge_money_warp">
            <van-field v-model="inputValueMoney" maxlength="6" type="number" placeholder="请输入充值金额" @input="inputRechargeMoney" />
          </div>
          <div class="recharge_warp"> <span>充值金额：</span> <span>{{ rechargeMoney }}元</span></div>
          <div class="make_sure_recharge">确认充值</div>
          <div class="recharge_agree">充值即代表同意 <span class="recharge_agree_page">《充值协议》</span> </div>
          <div class="trend_unlock_warp3">
            <div v-for="(itemDesc,indexDesc) in descList" :key="indexDesc" class="trend_unlock_desc">
              <van-icon name="info-o" />{{ itemDesc.content }}</div>
          </div>
        </div>

      </div>
    </van-popup>
  </div>
</template>

<script>
import contentPage from '../../components/content_page'
import pageTitleCom from '../../components/page_title_com'
import pageHeader from '../../components/page_header'
import addressSelect from '../../components/addressSelect'

export default {
  name: 'PianQuDetail',
  components: { contentPage, pageTitleCom, pageHeader, addressSelect },
  data() {
    return {
      searchKeyWord: '',
      defaultTypeIndex: 0,
      typeList: [{ id: 0, name: '冰山指数' }, { id: 1, name: '成交指数' }],
      columnsTimes: ['一年', '全部'],
      columnsAddress: ['上海', '北京'],
      isShowTimePopup: false,
      isShowAddressPopup: false,
      isShowUnlock: false, // 是否显示解锁的弹窗
      selectTime: '一年',
      selectAddress: '上海',
      personnelIndex: [2.6, 5.9, 9.0, 26.4, 28.7, 70.637, 60.6, 70.2, 48.7, 18.8, 6.0, 80],
      personnelIndex1: [12345, 34534, 57316, 42445, 97255, 47727, 69306, 87849, 50108, 12689, 17434, 68906],
      tableThList: ['行政区', '4月第1周', '5月第1周', '月环比', '排名'],
      isHavePay: false,
      arrList1: 3, // 行政数组长度，暂时用数字代替
      arrPlaceList: [
        { id: 0, value: 10, name: '宝山大杨镇' },
        { id: 1, value: 30, name: '宝山中杨镇' },
        { id: 2, value: 100, name: '宝山小杨镇' },
      ], // 片区数组
      arrPlaceList2: [],
      rechargeList: [
        { id: 0, money1: 10, money2: 10 },
        { id: 1, money1: 50, money2: 10 },
        { id: 2, money1: 80, money2: 10 },
        { id: 3, money1: 100, money2: 10 },
      ], // 金额列表
      defaultIndex: -1, // 默认显示的金额
      inputValueMoney: '', // 输入的金额
      rechargeMoney: undefined, // 充值的金额
      descList: [
        { content: '虚拟商品购买后不可退换，1冰币=1元，冰币有效期1年，过期自动时效，消费时优先扣除距离过期时间最近的冰币。' },
        { content: '包年vip特权可在购买之后的一年里免费查询所有城市、行政区、片区、小区。' },
        { content: '终身版vip特权可在购买之后终身享受免费查询所有城市、行政区、片区、小区、学校数据。' },
      ], // 描述的数据，实际上应该是富文本
      surplusMoney: undefined, // 剩余的钱
      isShowAddressSelect: false, // 头部的地址选择是否显示

    }
  },
  computed: {
    personnelIndex1Data() {
      const tempArr = this.personnelIndex1 || [0]
      return tempArr.map((item, index) => {
        return item / 1000
      })
    },
  },
  created() {
  },
  mounted() {
    this.drawChart()
    this.drawChart2()
    this.drawChart3()
    this.arrPlaceListChange()
  },
  methods: {
    openSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    closeSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    /** 去到城市的行政区详情 **/
    goXingZhenDetail() {
      this.$toast('你点击了我')
    },
    goPianQuDetail() {
      this.$toast('你点击了我')
    },
    /** 输入不同的充值金额的监听 **/
    inputRechargeMoney(value) {
      this.rechargeMoney = value
    },
    /**  片区数据修改 **/
    arrPlaceListChange() {
      const tempArr = []
      const tempArr2 = this.arrPlaceList

      for (let i = 0; i < tempArr2.length; i++) {
        if (tempArr2[i].value > 100) tempArr2[i].value = 100
        if (tempArr2[i].value > 0 && tempArr2[i].value <= 10) {
          const bg1 = { color: '#f4baae' }
          const newObj = Object.assign(tempArr2[i], bg1)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 10 && tempArr2[i].value <= 30) {
          const bg2 = { color: '#fc9884' }
          const newObj = Object.assign(tempArr2[i], bg2)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 30 && tempArr2[i].value <= 50) {
          const bg3 = { color: '#f98771' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 50 && tempArr2[i].value <= 80) {
          const bg3 = { color: '#c9213b' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 80) {
          const bg3 = { color: '#a90c38' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
      }
      console.log('修改后的数组', tempArr)
      this.arrPlaceList2 = tempArr.reverse()
      return tempArr
    },
    /** 选择充值金额 **/
    selectRechargeMoney(id, money) {
      this.defaultIndex = id
      this.rechargeMoney = money
      this.$toast('敬请期待')
    },
    changeType(id) {
      this.defaultTypeIndex = id
      if (this.defaultTypeIndex === 1) {
        this.drawChart2()
      }
    },
    /** echarts 冰山指数图 **/
    drawChart() {
      const trendCharts = document.getElementById('trendEcharts') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        xAxis: [
          {
            type: 'category',
            data: ['20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26', '20/01/26'],
            axisPointer: {
              type: 'shadow',
            },
            axisLabel: {
              interval: 0,
              rotate: 90,
            },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 10,
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: '{value} k',
            },
          },
        ],
        series: [
          {
            name: '市场活跃指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 81, 60.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            data: this.personnelIndex,
            itemStyle: {
              normal: {
                color: '#e15759',
                lineStyle: {
                  color: '#e15759',
                  width: 3,
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex.length - 1 === params.dataIndex) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                },
              },
            },

          },
          {
            name: '边际价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            yAxisIndex: 1,
            data: this.personnelIndex1Data,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#4e79a7',
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex1.length - 1 === params.dataIndex) {
                      return params.value * 1000
                    } else {
                      return ''
                    }
                  },
                },

              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },
    /** echarts 成交指数图 成交价 **/
    drawChart2() {
      const trendCharts = document.getElementById('trendEcharts2') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        xAxis: [{
          type: 'category',
          data: ['20/01/26', '20/01/27', '20/01/28', '20/01/29', '20/01/30', '20/02/01', '20/02/02', '20/02/03', '20/02/04', '20/02/05', '20/02/06', '20/02/07'],
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            interval: 0,
            rotate: 90,
          },
        },
        ],
        dataZoom: {
          show: true, // 为true 滚动条出现
          realtime: true,
          type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: 20, // 表示滚动条的高度，也就是粗细
          width: 200,
          start: 70, // 表示默认展示20%～80%这一段。
          end: 100,
          top: '0px',
          backgroundColor: 'rgba(0,0,0,0.4)',
          fillerColor: '#DCDCDC', // 选中范围的填充颜色。
          borderColor: '#f9f9f9',
          handleSize: '100%', // 滑动条左右二个滚动条大小,设为0即隐藏
          showDataShadow: false, // 是否显示数据阴影
          maxSpan: 30,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '18%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 10,
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: '{value} k',
            },
          },
        ],
        series: [
          {
            name: '市场活跃指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 81, 60.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            data: this.personnelIndex,
            itemStyle: {
              normal: {
                color: '#e15759',
                lineStyle: {
                  color: '#e15759',
                  width: 3,
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex.length - 1 === params.dataIndex) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                },
              },
            },

          },
          {
            name: '边际价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            yAxisIndex: 1,
            data: this.personnelIndex1Data,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#4e79a7',
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex1.length - 1 === params.dataIndex) {
                      return params.value * 1000
                    } else {
                      return ''
                    }
                  },
                },

              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },

    /** echarts 成交指数图 成交总价 **/
    drawChart3() {
      const trendCharts = document.getElementById('trendEcharts3') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        xAxis: [{
          type: 'category',
          data: ['20/01/26', '20/01/27', '20/01/28', '20/01/29', '20/01/30', '20/02/01', '20/02/02', '20/02/03', '20/02/04', '20/02/05', '20/02/06', '20/02/07'],
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            interval: 0,
            rotate: 90,
          },
        },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 10,
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: '{value} k',
            },
          },
        ],
        series: [
          {
            name: '市场活跃指数',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 81, 60.2, 32.6, 20.0, 6.4, 3.3],
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            data: this.personnelIndex,
            itemStyle: {
              normal: {
                color: '#e15759',
                lineStyle: {
                  color: '#e15759',
                  width: 3,
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex.length - 1 === params.dataIndex) {
                      return params.value
                    } else {
                      return ''
                    }
                  },
                },
              },
            },

          },
          {
            name: '边际价格',
            type: 'line',
            symbol: 'circle', // 设定为实心点
            symbolSize: 1, // 设定实心点的大小
            yAxisIndex: 1,
            data: this.personnelIndex1Data,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#4e79a7',
                },
                label: {
                  show: true,
                  position: 'left',
                  textStyle: {
                    fontSize: 12,
                    color: '#000000',
                  },
                  formatter: (params) => {
                    if (this.personnelIndex1.length - 1 === params.dataIndex) {
                      return params.value * 1000
                    } else {
                      return ''
                    }
                  },
                },

              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },

    /** 解锁 **/
    handleUnlock() {
      this.isShowUnlock = !this.isShowUnlock
    },

    openSelectTime() {
      this.isShowTimePopup = !this.isShowTimePopup
    },
    onConfirmTime(value) {
      console.log(value)
      this.selectTime = value
      this.isShowTimePopup = !this.isShowTimePopup
    },
    openSelectAddress() {
      this.isShowAddressPopup = !this.isShowAddressPopup
    },
    onConfirmAddress(value) {
      this.selectAddress = value
      this.isShowAddressPopup = !this.isShowAddressPopup
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";

  .trend_page_warp {
    .trend_page_warp2 {
      .trend_page_title {
        padding: pxTorem(12px) pxTorem(0px) pxTorem(12px) pxTorem(40px);
        font-size: pxTorem(36px);
        font-weight: bold;
        position: relative;
      }

      .trend_page_title:after {
        content: '';
        position: absolute;
        left: pxTorem(20px);
        top: pxTorem(23px);
        width: pxTorem(8px);
        height: pxTorem(30px);
        background-color: #1296db;
      }

      .trend_page_index_type {
        display: flex;
        padding: 0 20%;
        justify-content: space-around;

        .trend_page_type_name {
          padding: pxTorem(10px) pxTorem(24px);
          font-size: pxTorem(32px);
          border-radius: pxTorem(60px);
          background-color: #f0f0f0;
        }

        .typeActive {
          background-color: #1296db;
          color: #ffffff;
        }
      }
    }

    .trend_page_warp3 {
      border-top: pxTorem(14px) solid #f0f0f0;
      margin-top: pxTorem(30px);

      .trend_w3_box1 {
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        border-bottom: pxTorem(4px) solid #f0f0f0;
        font-size: pxTorem(30px);

        .trend_w3_box1_left {
          display: flex;
          align-items: center;
          font-size: pxTorem(34px);
          font-weight: bold;

          .trend_w3_box1_img {
            width: pxTorem(50px);
            height: pxTorem(50px);
            margin-right: pxTorem(10px);
          }

          .trend_w3_box1_text {
            margin-right: pxTorem(12px);
          }
        }

        .trend_w3_box1_right {
          .trend_w3_box1_price {
            font-size: pxTorem(40px);
            font-weight: bold;
          }
        }
      }

      .trend_w3_options {
        display: flex;
        font-size: pxTorem(24px);
        justify-content: space-around;
        align-items: center;
        padding: pxTorem(10px) pxTorem(0px);

        .trend_w3_opt1 {
        }

        .trend_w3_opt2 {
          border: 1px solid #9f9f9f;
          padding: pxTorem(8px) pxTorem(14px);
        }

        .trend_w3_opt3 {
          .trend_w3_opt3_title {
            margin-top: pxTorem(-34px);
          }

          .trend_w3_opt3_warp {
            position: relative;
            font-size: pxTorem(20px);

            .trend_w3_opt3_line {
              height: pxTorem(20px);
              width: pxTorem(140px);
              margin-top: pxTorem(6px);
              background-image: linear-gradient(to right, #ceeac5, #73a083);
            }

            .trend_w3_opt3_l {
              position: absolute;
              top: pxTorem(24px);
            }

            .trend_w3_opt3_r {
              position: absolute;
              right: pxTorem(-20px);
              top: pxTorem(24px);
            }
          }
        }

        .trend_w3_opt4 {
          .trend_w3_opt4_title {
          }

          .trend_w3_opt4_type {
            position: relative;

            .trend_w3_opt4_span1 {
              position: relative;
              display: inline-block;
              margin-right: pxTorem(40px);
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_span2 {
              position: relative;
              display: inline-block;
            }

            .trend_w3_opt4_span1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .trend_w3_opt4_span2:before {
              content: ' ';
              left: pxTorem(-24px);
              position: absolute;
              top: pxTorem(6px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }

            .trend_w3_opt4_c1 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_c2 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_c1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .trend_w3_opt4_c2:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }
          }
        }

        .trend_w3_opt5 {
          .trend_w3_opt5_address {
            border: 1px solid #9f9f9f;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
        }
      }

      .trend_w3_Echarts_warp {
        margin: pxTorem(30px) auto;

        .trend_w3_trendEcharts {
          width: pxTorem(650px);
          margin: auto;
          height: pxTorem(750px);
        }
      }

      .trend_w3_Echarts_warp2 {
        margin: pxTorem(30px) auto;
        position: relative;

        .trend_w3_trendEcharts2 {
          width: pxTorem(650px);
          margin: auto;
          height: pxTorem(750px);
        }

        .echartsData1 {
          position: absolute;
          top: 0;
          left: 6%;
          font-size: pxTorem(28px);
        }

        .echartsData2 {
          position: absolute;
          top: pxTorem(-28px);
          left: 24%;
          font-size: pxTorem(28px);
        }

        .echartsData3 {
          position: absolute;
          top: pxTorem(-28px);
          right: 16%;
          font-size: pxTorem(28px);
        }
      }
    }

    .trend_page_warp4 {

      .trend_table_warp {
        font-weight: normal;

        .trend_table {
          width: 94%;
          margin: auto;

          .trend_table_th {
            font-size: pxTorem(32px);
            border-bottom: 1px solid #9f9f9f;
          }

          .trend_table_tr {
            font-size: pxTorem(26px);
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            padding: pxTorem(6px) 0;

            .trend_table_td1 {
              color: #333333;
              padding: pxTorem(10px) 0;
            }

            .trend_table_td {
              color: #c9213b;
            }
          }

          .trend_table_tr:nth-child(odd) {
            background-color: #f0f0f0;
          }

          .trend_table_tr:nth-child(even) {
            background-color: #ffffff;
          }
        }
      }
    }

    .trend_page_warp5 {
      .trend_warp5_ul {
        padding: pxTorem(40px);

        .trend_warp5_li {
          margin-bottom: pxTorem(6px);
          display: flex;
          align-items: center;

          .trend_warp5_sp1 {
            width: pxTorem(200px);
            display: inline-block;
            font-size: pxTorem(28px);
            text-align: right;
            margin-right: pxTorem(6px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .trend_warp5_sp2 {
            display: inline-block;
            height: pxTorem(34px);
          }

          .trend_warp5_sp3 {
            font-size: pxTorem(28px);
            margin-left: pxTorem(10px);
          }
        }
      }
    }

    .trend_unlock_warp {
      position: absolute;
      top: 8%;
      height: 90%;
      overflow: auto;
      .unlock_title{
        margin: pxTorem(60px) auto pxTorem(20px) auto;
        font-size: pxTorem(34px);
        color: #666666;
        text-align: center;
      }
      .unlock_current_need{
        font-size: pxTorem(28px);
        color: #e98f36;
        text-align: center;
        margin: pxTorem(0px) auto;
      }
      .unlock_desc{
        font-size: pxTorem(32px);
        text-align: center;
        color: #666666;
        margin: pxTorem(10px) auto pxTorem(20px) auto;
      }
      .unlock_no_money{
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        font-size: pxTorem(32px);
        .un_no_r_money{
          color: #e98f36;
        }
      }
      .trend_unlock_warp2 {
        padding: pxTorem(0px) pxTorem(30px);

        .trend_unlock_ul {
          display: flex;
          padding: pxTorem(30px) pxTorem(40px) 0 pxTorem(40px);
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: pxTorem(20px);
          border-top: 1px solid #999999;

          .trend_unlock_li {
            width: pxTorem(280px);
            text-align: center;
            border: 1px solid #999999;
            padding: pxTorem(21px) 0;
            margin-bottom: pxTorem(40px);
            font-size: pxTorem(28px);
            border-radius: pxTorem(8px);
            position: relative;

            .recharge_money {
              .recharge_money_count {
                font-size: pxTorem(40px);
              }
            }

            .recharge_money_desc {
              color: #999999;
            }

            .rechargeMoneyDesc {
              color: #e98f36;
            }
          }

          .rechargeActive {
            background-color: #ffcc00;
          }

          .right_icon {
            position: absolute;
            top: 0;
            background-color: #e98f36;
            font-size: pxTorem(21px);
            padding: pxTorem(2px) pxTorem(6px);
            border-radius: pxTorem(6px);
            color: #ffffff;
          }

        }

        .input_recharge_money_warp {
          border-radius: pxTorem(4px);
          width: pxTorem(610px);
          margin: auto;
          border: 1px solid #999999;
          .input_recharge_money {
            border: none!important;
            outline: none!important;
            width: 100%;
            padding: pxTorem(4px) pxTorem(20px);
            font-size: pxTorem(32px);
          }
        }
        .recharge_warp{
          font-size: pxTorem(34px);
          padding: pxTorem(20px) pxTorem(36px);
          color: #e98f36;
        }
        .make_sure_recharge{
          width: pxTorem(650px);
          margin:pxTorem(20px) auto;
          height: pxTorem(80px);
          line-height: pxTorem(80px);
          text-align: center;
          font-size: pxTorem(34px);
          color: #ffffff;
          background-color: #e98f36;
          border-radius: pxTorem(8px);
        }
        .recharge_agree{
          width: pxTorem(400px);
          margin: pxTorem(10px) auto;
          font-size: pxTorem(28px);
          color: #666666;
          .recharge_agree_page{
            color: #999999;
          }
        }
      }
      .trend_unlock_warp3{
        padding: pxTorem(0px) pxTorem(30px);
        .trend_unlock_desc{
          font-size: pxTorem(30px);
          color: #666666;
          margin-bottom: pxTorem(30px);
        }
      }
    }

    /* 公共解锁 相关样式 start */
    .trend_page_isHavePay1 {
      text-align: center;
      font-size: pxTorem(28px);
      margin: pxTorem(70px) 0 pxTorem(30px) 0;
    }

    .trend_page_isHavePay2 {
      text-align: center;
      font-size: pxTorem(28px);
      margin: pxTorem(50px) 0 pxTorem(30px) 0;
    }

    .trend_page_unlock {
      text-align: center;
      font-size: pxTorem(28px);
      width: pxTorem(350px);
      padding: pxTorem(12px) 0;
      border-radius: pxTorem(30px);
      background-color: #ff9900;
      color: #ffffff;
      margin: pxTorem(70px) auto pxTorem(30px) auto;
    }

    /* 公共解锁 相关样式 end */

    /* 公共标题 相关样式 start */
    .trend_warp_title {
      display: flex;
      align-items: center;
      padding: pxTorem(30px) pxTorem(20px);

      .trend_warp_img {
        width: pxTorem(40px);
        height: pxTorem(40px);
        margin-right: pxTorem(10px);
      }

      .trend_warp_text {
        font-size: pxTorem(34px);
        color: #333333;
        font-weight: bold;
      }
    }

    /* 公共标题 相关样式 end */
  }
</style>
